include ./spacemixins.jade

doctype html
html
	head
		+head("HTML-driven narrative 3D-scrolling")

body

	//- Mixins
	mixin firstFrame
		section.center
			img.inline(src="img/spacejs.png", width="170px" alt="")
		p.center.nm HTML-driven narrative 3D-scrolling
		p.small.center.subtle (No js required)

		h3.center.small: a(href="demo1.html") Try the demos
		.center
			a(href="demo1.html"): img.shadow(src="img/demo1thumb.jpg", width="200px")
			a(href="demo2.html", style="margin-left: 20px;"): img.shadow(src="img/demo2thumb.jpg", width="200px")

		p.center.small
			| View on 
			a.bold.modal(href="https://github.com/gopatrik/space.js") GitHub 
			| or read 
			a.bold.modal(href="/articles/space.js/") the Article

			p.center
				<a href="https://twitter.com/share" class="twitter-share-button" data-text="Space.js – HTML-driven narrative 3D-scrolling." data-via="gopatrik" data-size="large">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

				<a class="github-button" href="https://github.com/gopatrik/space.js" data-style="mega" data-count-href="/gopatrik/space.js/stargazers" data-count-api="/repos/gopatrik/space.js#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star gopatrik/space.js on GitHub">Star</a>



	section.absolute.narrow.mt-large(style="height:100px; bottom: 20px; left: 20px; z-index:100;")
		.third(style="text-align:right;")
			.portrait-frame.inline(style="background-image:url(img/astro_small.jpg);")
		.two-third
			.mt(style="font-size:8px;") Author.
			.nm.small(style="margin-bottom:5px;") Patrik Goethe
			div: a(href="https://twitter.com/gopatrik", class="twitter-follow-button" data-show-count="true")
			.nm(style="font-size:8px;") PS. Not real astronaut.
	
	+frame
		+firstFrame


	+frame
		:markdown
			## Creating a frame

				<div class="space-frame">[contents]</div>


	+frame
		:markdown
			**Recommended:** Use ```inner-frame``` inside the ```space-frame```. This makes things centered both vertically and horizontally inside the frame.

				<div class="space-frame">
					<section class="space-inner-frame">
						[contents]
					</section>
				</div>


	+frame(data-duration="2")
		:markdown
			## Custom duration
			If we want we can provide a custom duration for our frames with the data-duration attribute, which multiplies the default duration of the transition.


				<section class="space-frame" data-duration="2">...</section>
				<section class="space-frame" data-duration="0.6">...</section>


	+frame(data-enter="fadeIn" data-exit="rotate360")
		:markdown
			## Custom transition
			Space.js has a default default transition - which is to enter by fading in and exit by scaling up and fading out. **We can provide a custom transition override it**, (from predefined transitions).


				<section class="space-frame" data-transition="rotate360">...</section>


	+frame(data-transition="fadeOut slideInLeft")
		:markdown
			## Multiple values are supported!

				data-transition="fadeOut slideInLeft"


	+frame(data-enter="fadeIn", data-exit="fadeOut zoomOut")
		:markdown
			### Custom entry and exit
			We can also provide specific **enter** and **exit** transitions.

				<section class="space-frame" data-enter="fadeIn" data-exit="fadeOut zoomOut">...</section>


	+frame(data-duration="1.3", data-enter="fadeIn", data-exit="zoomOut fadeOut")
		:markdown
			## What a complete frame could look like

				<div class="space-frame" data-enter="fadeIn" data-exit="zoomOut fadeOut" data-duration="1.3">
					<section class="space-inner-frame">
						<div style="background-image:url(img/splash.png); padding:150px 200px;" class="bg">
							<section>
								<p>Demo 1</p>
								<h1>The Gallery</h1>
							</section>
						</div>
					</section>
				</div>


	+frame(data-enter="scaleIn", data-exit="slideOutDown")
		:markdown
			## Custom transitions
			You can also specify your own transitions with the ```addTransitions``` method.

				<script src="space.js"></script>

				<script type="text/javascript">
					var transitions = {
						rotate720: {
							'rotate': {from:0, to:720}
						},
						fadeOutHalf: {
							'opacity': {from:1, to:0.5}
						}
					};
					Space.addTransitions(transitions);
				</script>


	+frame(data-enter="fadeIn", data-exit="fadeOut", data-duration="4")
		+firstFrame
		section.narrow.mt-large(style="height:100px; bottom: 20px; left: 20px;")
			.third(style="text-align:right;")
				.portrait-frame.inline(style="background-image:url(img/astro_small.jpg);")
			.two-third
				.mt(style="font-size:8px;") Author.
				.nm.small(style="margin-bottom:5px;") Patrik Goethe
				div: a(href="https://twitter.com/gopatrik", class="twitter-follow-button" data-show-count="true")
				.nm(style="font-size:8px;") PS. Not real astronaut.

	+frame


	script(src="space.js")
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
	<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>

